<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左栏弹出效果</title>
		<style>
			/* 结合实际html结构---通配【合理】 */
			*{
				font: 16px "微软雅黑";
				/* 去掉内外边距 */
				margin: 0;
				padding: 0;
				/* 无序列表：有样式----“去一个样式：列表项” */
				lis t-style-type: none;
				/* 无序列表：有样式 ----【理解：简写】
				去全部样式：list-style-type  去列表项样式
				           list-style-position  去列表项标记位置样式
						   list-style-image      去列表项图片标记样式
				 */
				list-style: none;
			}
			/*左栏效果
			 1.左栏空间区域 [aside]  235*460    背景颜色
			 2.左栏区域内容【li】加权  宽235    高50  相对定位---挂靠点【固定位置】
			 3.给每个区域内容【li】  加鼠标移动上去改背景颜色
			 4.左栏弹出框：400*450  1像素边框  绝对定位-钩子-微调
			 */
			aside{
				width: 235px;
				height: 450px;
				background: #a5a5a5;
				margin: 50px;
			}
			aside ul.sidebar li{
				width: 235px;
				height: 50px;
				/* 相对定位---挂靠点 */
				position: relative;
				text-align: center;
				line-height: 50px;
			}
			aside ul.sidebar li:hover{
				background: #eee;
				
			}
		    aside ul.sidebar div.out{
			width: 400px;
			height: 450px;
			border: 1px solid red;
			/* 挂靠位：绝对定位：按照相对定位基点开始定位 */
			position: absolute;
			left: 285px;
			/* 显示隐藏   JavaScript[JQuery框架] */
			display: none;
		    }
		</style>
		<script src="js/jquery-1.11.1(1).js"></script>
	</head>
	<body>
		<!-- html结构 结构化标记【语义化标签】 
		 aside元素  针对：左栏，广告，弹出效果... 有利于SEO优化
		之前版本通过div+id起别名方式【缺点：繁琐，定义起名，冗余】
		 -->
		 <aside>
			 <ul class="sidebar">
				 <!-- 弹出框 -->
				 <div class="out"></div>
			 	<li>手机</li>
			 	<li>电脑</li>
			 	<li>家居</li>
			 	<li>男装</li>
			 	<li>女装</li>
			 	<li>美妆</li>
			 	<li>房产</li>
			 	<li>母婴</li>
			 	<li>食品</li>
			 </ul>
		 </aside>
		 <script>
			 //左栏弹出与隐藏  .hover事件源+css函数
			 //选择器: li
			 $("aside ul.sidebar li").hover(function(){
				 /* 弹出框默认：隐藏--hover悬停第一件事：显示*/
				 $("aside ul.sidebar div.out").css("display","block");
			 },function(){
				  $("aside ul.sidebar div.out").css("display","none");
			 });
		 </script>
	</body>
</html>
<!-- 事件源  .hover（）    切换效果与css悬停效果hover一致
                           语法：.hover（function（）{}），hover（function（）{}）
 -->